<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
  <title>{$tdk['title']}</title>
  <meta name="description" content="{$tdk['description']}">
  <meta name="keywords" content="{$tdk['keywords']}">
  <meta name="author" content="alonez"/>
  <meta name="baidu-site-verification" content="code-mjNnJHp6FK"/>
  <link rel="shortcut icon" href="https://ujia-img.oss-cn-shenzhen.aliyuncs.com/beauthome/favicon.ico">
  <link href="https://res.bestyoujia.com/common/third/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  <script src="https://res.bestyoujia.com/common/third/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://res.bestyoujia.com/common/third/layer/3.1.1/layer.js"></script>
  <style>

    body, h2, p {
      max-width: 500PX;
      margin: 0 auto;
    }

    button {
      border: 0;
    }

    button:focus {
      outline: none;
    }

    button:active {
      opacity: .7;
    }

    ol, ul {
      list-style: none;
    }

    input {
      border: 0;
      height: .5rem;
      letter-spacing: 1px;
      font-size: .28rem;
      width: 4.5rem;
    }

    input:focus {
      outline: none;
    }

    ::-moz-placeholder {
      color: #999999;
      font-size: .28rem;
      letter-spacing: 1px;
    }

    ::-webkit-input-placeholder {
      color: #999999;
      font-size: .28rem;
      letter-spacing: 1px;
    }

    :-ms-input-placeholder {
      color: #999999;
      font-size: .28rem;
      letter-spacing: 1px;
    }

    .img-fit {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .show {
      display: block;
    }

    .hide {
      display: none;
    }

    .p1, .p2 {
      margin-top: .7rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .title {
      font-size: .4rem;
      font-weight: bold;
      color: #1C2856;
      text-align: center;
    }

    .sub-title {
      font-size: .26rem;
      color: #999;
    }

    .btn {
      width: 2.8rem;
      height: .8rem;
      background: linear-gradient(0deg, #DF7717 0%, #FFB76A 100%);
      border-radius: .4rem;
      font-size: .4rem;
      font-weight: bold;
      color: #FFFFFF;
    }

    .check {
      margin: .55rem .3rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .check > div {
      width: calc(100% / 2.05);
      margin-bottom: .2rem;
    }

    .check > div > img {
      width: 3.35rem;
    }

    @keyframes pulse {
      from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }

      50% {
        -webkit-transform: scale3d(1.3, 1.3, 1.3);
        transform: scale3d(1.3, 1.3, 1.3);
      }

      to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }

    .p2 {
      display: none;
    }

    .container-mask {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0,0,0,.7);
      display: none;
      overflow: hidden;
      min-height: 100vh;
    }

    .container-result {
      display: none;
    }

    .order {
      margin-top: .6rem;
    }
  </style>
  <script>
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?40c4a0b79991b779265eef34e4be9d02";
      const s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</head>
<body>

{include file="public/qrcode_tips" /}

<!--<section class="container-flow">-->
<!--  <div class="header">-->
<!--    <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/banner.png" alt=""/>-->
<!--  </div>-->

<!--  <div class="p1">-->
<!--    <h2 class="title">精装房为什么要验房？</h2>-->
<!--    <div style="margin: .7rem .49rem">-->
<!--      <img class="img-fit" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/myd.png" alt=""/>-->
<!--    </div>-->
<!--    <button class="btn zyyf animate__animated animate__pulse animate__infinite">专业验房</button>-->
<!--  </div>-->

<!--  <div class="p2">-->
<!--    <div style="display: flex; flex-direction: column; align-items: center">-->
<!--      <h2 class="title">全面检测您的<span style="color: #F58F2C">房屋质量</span></h2>-->
<!--      <div class="check">-->
<!--        <div><img class="img-fit wyyf-img" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/wt1.png" alt=""/></div>-->
<!--        <div><img class="img-fit wyyf-img" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/wt2.png" alt=""/></div>-->
<!--        <div><img class="img-fit wyyf-img" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/wt3.png" alt=""/></div>-->
<!--        <div><img class="img-fit wyyf-img" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/wt4.png" alt=""/></div>-->
<!--      </div>-->
<!--      <button class="btn wyyf animate__animated animate__pulse animate__infinite">我要验房</button>-->
<!--    </div>-->
<!--  </div>-->
<!--</section>-->

<!--<section class="container-mask">-->
<!--  <div style="display: flex;width: 100%; height: 100%; flex-direction: column; justify-content: center;align-items: center">-->
<!--    <div class="mask-content" style="width: 6rem;height: 6.09rem;background: url(https://res.bestyoujia.com/web/ZMYJ/wxlanding/sheet.png); background-size: cover; border-radius: .06rem;display: flex; flex-direction: column; align-items: center; position: relative">-->
<!--      <div style="position: absolute; bottom: .4rem">-->
<!--        <div style="width: 5rem;height: .7rem;background: #ffffff;margin-bottom: .3rem; display: flex; align-items: center;padding-left: .2rem">-->
<!--          <img class="img-fit" style="width: .31rem" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/xingming.png" alt=""/>-->
<!--          <div style="width: 1px;height: .44rem;background: #000000; margin: 0 .18rem">&nbsp;</div>-->
<!--          <input id="customer" placeholder="输入姓名，方便称呼您">-->
<!--        </div>-->
<!--        <div style="width: 5rem;height: .7rem;background: #ffffff;display: flex; align-items: center;padding-left: .2rem">-->
<!--          <img class="img-fit" style="width: .33rem" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/dianhua.png" alt=""/>-->
<!--          <div style="width: 1px;height: .44rem;background: #000000; margin: 0 .16rem">&nbsp;</div>-->
<!--          <input id="mobile" type="number" placeholder="输入电话，预约时间+上门验房">-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <button class="btn order animate__animated animate__pulse animate__infinite">立即预约</button>-->
<!--  </div>-->
<!--</section>-->

<!--<section class="container-result">-->
<!--  <div style="display: flex; flex-direction: column; align-items: center">-->
<!--    <div style="margin-top: .7rem; "><img class="img-fit" style="width: 2.9rem" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/succeed.png" alt=""/></div>-->
<!--    <div style="margin-top: .36rem;font-size: .46rem;font-weight: bold;color: #F58F2C;">恭喜您，预约成功！</div>-->
<!--    <div style="margin-top: .2rem;font-size: .24rem;font-weight: 400;color: #333333;">请留意您的来电</div>-->
<!--    <div style="margin-top: .63rem; "><img class="img-fit" style="width: 5.3rem" src="https://res.bestyoujia.com/web/ZMYJ/wxlanding/liucheng.png" alt=""/></div>-->
<!--  </div>-->
<!--</section>-->

<script src="https://res.bestyoujia.com/common/third/js.cookie/2.2.1/js.cookie.min.js"></script>
<script src="https://res.bestyoujia.com/common/assets/js/appointment.js"></script>
<script src="https://res.bestyoujia.com/web/ZMYJ/assets/js/mobile-common.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://res.bestyoujia.com/common/assets/js/wxShare.js"></script>
<script type="text/javascript">
  initWxShare('致美优家-您的专属验房服务', '致美优家-您的专属验房服务');

  (function (n, e) {
    const t = n.documentElement, i = "orientationchange" in window ? "orientationchange" : "resize", d = function () {
      let n = t.clientWidth;
      if( n > 500) {
        n = 500;
      }
      n && (t.style.fontSize = n / 7.5 + "px")
    };
    n.addEventListener && (e.addEventListener(i, d, !1));
    n.addEventListener && n.addEventListener("DOMContentLoaded", d, !1);
  })(document, window);

  Array.prototype.remove = function (val) {
    const index = this.indexOf(val);
    if (index > -1) {
      this.splice(index, 1);
    }
  };

  $('input, .mask-content').on('click', function (e) {
    e.stopPropagation();
  });

  $('.zyyf').on('click', function () {
    $('.p1').hide();
    $('.p2').show();
  });

  $('.wyyf-img').on('click', function () {
    $('.p1').hide();
    $('.p2').show();
    $('.container-mask').show();
    $('.wyyf').hide();
  });

  $('.wyyf').on('click', function () {
    $('.p1').hide();
    $('.p2').show();
    $('.container-mask').show();
    $('.wyyf').hide();
  });

  $('.container-mask').on('click', function () {
    $('.p1').hide();
    $('.p2').show();
    $('.container-mask').hide();
    $('.wyyf').show();
  });

  $('.order').on('click', function (e) {
    e.stopPropagation();
    window.page_position = '微信报名';
    if(!$('#customer').val()) {
      showWarnTips('请输入您的姓名', '#customer');
      return;
    }
    const mobile = $('#mobile').val();
    const mobile_result = validMobile(mobile);
    switch (mobile_result) {
      case 0:
        showWarnTips('请输入正确的手机号', '#mobile');
        break;
      case 1:
        const data = { customer: $('#customer').val(), mobile };
        doAppointment(data, function(res) {
          $('#customer').val("");
          $('#mobile').val("");
          console.log('onAppointmentSuccess', res);
          const { data = '' } = res;
          if(data) {
            buryingPoint('APPOINTMENT', data);
            $('.container-flow').hide();
            $('.container-mask').hide();
            $('.container-result').show();
          }
        }, function(err) {
          console.log('onAppointmentError', err);
          $('#customer').val("");
          $('#mobile').val("");
          layer.msg('预约失败', {
            icon: 5,
            time: 1200
          });
        });
        break;
      case 2:
        showWarnTips('请输入手机号', '#mobile');
        break;
    }
  });

  /**
   * 1:正确，0:格式错误，2:未输入
   * @param number
   */
  function validMobile(number) {
    const isMob = /^1\d{10}$/;
    if (number == "") {
      return 2;
    }
    return isMob.test(number) ? 1 : 0;
  }

  /**
   * 显示提示
   * @param msg
   * @param dom
   */
  function showWarnTips(msg, dom) {
    layer.tips(msg, dom, {
      tips: [1, '#fa8c16'],
      time: 2000
    });
  }

  doStatistics('page', 'zmyj_wxlanding', Cookies.get('visitor_id'));
</script>
</body>
</html>
